<template>
    <qly-base-page title="下单" ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="18rpx 0">
        <tr-card margin="0 24rpx" padding="24rpx 24rpx 1rpx" border-radius="12rpx" >
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-width="200rpx">
                <uni-forms-item name="account" label="预定人姓名：" required>
                    <uni-easyinput v-model="form.account" placeholder="请输入预定人姓名"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="预定人手机号：" required>
                    <uni-easyinput type="number" v-model="form.account" placeholder="请输入预定人手机号"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="出行日期：" required>
                    <uni-datetime-picker type="date" v-model="form.date" />
                </uni-forms-item>
                <uni-forms-item name="account" label="选择线路：" required>
                    <tr-select  v-model="form.value" :data="range"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="选择套餐：" required>
                    <tr-select  v-model="form.value" :data="range"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="语言类型：" required>
                    <tr-select  v-model="form.value" :data="range"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="预定数量：" required>
                    <uni-easyinput type="number" v-model="form.account" placeholder="请输入预定数量"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="是否收款：" required>
                    <up-radio-group v-model="form.type" >
                        <up-radio v-for="(item, index) in BooleanList"
                                :key="index" :label="item.label"
                                :name="item.value" >
                        </up-radio>
                    </up-radio-group>
                </uni-forms-item>
                <uni-forms-item name="account" label="收款金额：" required>
                    <uni-easyinput type="digit" v-model="form.account" placeholder="请输入收款金额"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="结算金额：">
                    <uni-easyinput v-model="form.account" disabled placeholder="请输入结算金额"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="集合地：" required>
                    <tr-select  v-model="form.value" :data="range"/>
                </uni-forms-item>
                
                <uni-forms-item name="account" label="酒店接送：" required>
                    <up-radio-group v-model="form.hotelShuttle" >
                        <up-radio v-for="(item, index) in BooleanList"
                                  :key="index" :label="item.label"
                                  :name="item.value" >
                        </up-radio>
                    </up-radio-group>
                </uni-forms-item>
                <uni-forms-item name="account" label="酒店地址：">
                    <uni-easyinput type="textarea" v-model="form.account" placeholder="请输入上车地"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="WhatsApp：" required>
                    <uni-easyinput v-model="form.account" placeholder="请输入WhatsApp"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="预定人邮箱：" required>
                    <uni-easyinput v-model="form.account" placeholder="请输入预定人邮箱"/>
                </uni-forms-item>
                <uni-forms-item name="account" label="备注：">
                    <uni-easyinput type="textarea" v-model="form.account" placeholder="请输入备注"/>
                </uni-forms-item>
            
            </uni-forms>
        </tr-card>
        
        <template #footer>
            <view class="tr-btns-box">
                <view class="btn-item">
                    <up-button text="取消" size="large" plain @tap="cancel"></up-button>
                </view>
                <view class="btn-item">
                    <up-button text="确认下单" color="#5572f0" size="large"
                               @tap="qly.form.pass(submit,formRef)"></up-button>
                </view>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>

import {BooleanTypeEnum} from '@/enums/common'

const formRef = ref()
const form = ref({
    date: '',
    account: '',
    password: '',
    images: [],
    type:"",
    hotelShuttle:0
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}

const BooleanList=computed(()=>{
    return Object.values(BooleanTypeEnum)
})

const range=ref([{
    value: 0,
    label: "篮球运动",
}, {
    value: 1,
    label: "足球运动",
}, {
    value: 2,
    label: "游泳健身运动"
}, {
    value: 3,
    label: "跑步有氧运动",
}, {
    value: 4,
    label: "网球运动"
}, {
    value: 5,
    label: "羽毛球运动"
}, {
    value: 6,
    label: "乒乓球运动"
}, {
    value: 7,
    label: "保龄球运动"
}, {
    value: 1,
    label: "足球运动",
}, {
    value: 2,
    label: "游泳健身运动"
}, {
    value: 3,
    label: "跑步有氧运动",
}, {
    value: 4,
    label: "网球运动"
}, {
    value: 5,
    label: "羽毛球运动"
}, {
    value: 6,
    label: "乒乓球运动"
}, {
    value: 7,
    label: "保龄球运动"
}])

// 取消
const cancel = () => {
    uni.navigateBack()
}

const submit = () => {
    console.log('submit')
}
</script>
<style scoped lang="scss">
.input-box {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
}
:deep(.bang-input-base-bgc){
    background-color: #fff;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
}

/* #ifdef H5 */
:deep(.qly-select){
    padding: 8rpx 8rpx 8rpx 16rpx !important;
}
/* #endif */

:deep(.uni-forms-item__content){
    display: flex;
    align-items: center;
}
</style>
